<template>
  <div class="custom-box">
    <HeaderNav :bgStyle="bgStyle" :show-edit="true" @edit="toEdit" />

    <div class="custom-main">
      <div class="main-header">
        <div class="custom-info">
          <img
            v-if="customerDetail.logo"
            :src="getLogo(customerDetail.logo)"
            alt=""
          />
          <div class="name">
            {{ customerDetail.zhName }}
          </div>
        </div>
        <div
          class="other-info"
          v-if="
            customerDetail.originalNameVoList &&
            customerDetail.originalNameVoList.length
          "
        >
          曾用名：
          <div
            v-for="(item, index) of customerDetail.originalNameVoList"
            :key="index"
            class="info"
          >
            {{ item.name }} -- {{ item.changeDate?.slice(0, 10) }}
          </div>
        </div>
        <div
          class="other-info"
          v-if="
            customerDetail.revokeInfoVo?.cancelReason ||
            customerDetail.revokeInfoVo?.revokeReason
          "
        >
          注销吊销信息
          <div class="info">
            <p>注销理由： {{ customerDetail.revokeInfoVo.cancelReason }}</p>
            <p>
              注销时间：
              {{ customerDetail.revokeInfoVo.cancelDate?.slice(0, 10) }}
            </p>
            <p>吊销理由： {{ customerDetail.revokeInfoVo.revokeReason }}</p>
            <p>
              吊销时间：
              {{ customerDetail.revokeInfoVo.revokeDate?.slice(0, 10) }}
            </p>
          </div>
        </div>
      </div>

      <div class="main-content">
        <div class="box-card">
          <ul class="brand-content">
            <li>客户类型：{{ customType }}</li>
            <li>是否上市：{{ isOnStock }}</li>
            <li>上市类型：{{ customerDetail.stockType }}</li>
            <li>企业性质：{{ entType }}</li>
            <li>
              展商类型：{{
                customerDetail.companyType !== "6"
                  ? companyType
                  : customerDetail.companyTypeOther
              }}
            </li>
            <li>更新日期：{{ customerDetail.updatedDate }}</li>
            <li>企查查同步时间：{{ customerDetail.qccSynDate }}</li>
            <li>cbe同步时间：{{ customerDetail.cbeSynDate }}</li>
          </ul>
          <div class="brand-intro">
            <div class="intro-h">
              <span>简介：</span>
              <span class="btn" @click="isExpand = !isExpand">{{
                isExpand ? "收起" : "展开"
              }}</span>
            </div>

            <div
              v-html="customerDetail.briefIntro"
              :class="['html-box', isExpand ? 'expand' : '']"
            ></div>
          </div>
        </div>

        <van-collapse v-model="activeNames">
          <van-collapse-item title="工商信息" name="1">
            <ul class="brand-content">
              <li>统一社会信用代码：{{ customerDetail.creditCode }}</li>
              <li>企业名称：{{ customerDetail.zhName }}</li>
              <li>法定代表人：{{ customerDetail.operName }}</li>
              <li>登记状态：{{ customerDetail.status }}</li>
              <li>成立日期：{{ customerDetail.startDate }}</li>
              <li>核准日期：{{ customerDetail.checkDate }}</li>
              <li>注册资本：{{ customerDetail.registCapi }}</li>
              <li>实缴资本：{{ customerDetail.recCap }}</li>
              <li>股票代码：{{ customerDetail.stockNumber }}</li>
              <li>组织机构代码：{{ customerDetail.orgNo }}</li>
              <li>工商注册号：{{ customerDetail.no }}</li>
              <li>企业类型：{{ customerDetail.econKind }}</li>
              <li>
                营业期限：
                <span>{{ customerDetail.termStart }}</span>
                <span v-if="customerDetail.termStart && customerDetail.termEnd"
                  >至</span
                >
                <span>{{ customerDetail.termEnd }}</span>
              </li>
              <li>登记机关：{{ customerDetail.belongOrg }}</li>
              <li>英文名：{{ customerDetail.enName }}</li>
              <li>注册地址：{{ customerDetail.address }}</li>
              <li class="scope-box">经营范围：{{ customerDetail.scope }}</li>
            </ul>
          </van-collapse-item>
          <van-collapse-item title="行政区域" name="2">
            <ul class="brand-content">
              <li>省份：{{ customerDetail.customAreaVo?.province }}</li>
              <li>城市：{{ customerDetail.customAreaVo?.city }}</li>
              <li>区域：{{ customerDetail.customAreaVo?.county }}</li>
            </ul>
          </van-collapse-item>
          <van-collapse-item
            title="品牌展示"
            name="3"
            v-if="['1', '2'].includes(customerDetail.companyType)"
          >
            <BrandDisplay
              :brandInfoVoList="customerDetail.brandInfoVoList"
              :companyType="customerDetail.companyType"
              ref="brandCompRef"
            />
          </van-collapse-item>
          <van-collapse-item title="展商信息" name="4" v-else>
            <ExhibitionInfo :detail="customerDetail" />
          </van-collapse-item>
          <van-collapse-item title="问卷信息" name="5">
            <QuestionInfo
              :contentVoList="customerDetail.contentVoList"
              v-if="customerDetail.contentVoList"
            />
          </van-collapse-item>
          <van-collapse-item title="拜访记录" name="6">
            <VisitInfo />
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="CustomComp">
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { customDetail } from "@/views/home/custom/fetchData";
import { getLogo } from "@/utils";
import { dictListAll } from "@/api/dict";
import HeaderNav from "@/components/headerNav/index.vue";
import BrandDisplay from "./comp/brandDisplay/index.vue";
import QuestionInfo from "./comp/questionInfo/index.vue";
import ExhibitionInfo from "./comp/exhibitionInfo/index.vue";
import VisitInfo from "./comp/visitInfo/index.vue";
import { closeToast, showLoadingToast } from "vant";
import useUserStore from "@/store/modules/user";

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const customerDetail = ref<Record<string, any>>({});
const custom_type = ref<Record<string, any>[]>([]);
const company_type = ref<Record<string, any>[]>([]);
const cusotm_stock = ref<Record<string, any>[]>([]);
const ent_type = ref<Record<string, any>[]>([]);
const customType = computed(() => {
  const item = custom_type.value.find(
    (item: any) => item.dictValue === customerDetail.value.customType
  );
  return item?.dictLabel;
});
const companyType = computed(() => {
  const item = company_type.value.find(
    (item: any) => item.dictValue === customerDetail.value.companyType
  );
  return item?.dictLabel;
});
const isOnStock = computed(() => {
  const item = cusotm_stock.value.find(
    (item: any) => item.dictValue === customerDetail.value.isOnStock
  );
  return item?.dictLabel;
});
const entType = computed(() => {
  const item = ent_type.value.find(
    (item: any) => item.dictValue === customerDetail.value.entType
  );
  return item?.dictLabel;
});
const isExpand = ref(false);
const brandCompRef = ref<any>();
const bgStyle = computed(() => {
  return {
    background: `url(${getLogo(customerDetail.value.logo)}) no-repeat center`
  };
});
const activeNames = ref<string[]>([]);

function toEdit() {
  router.push({
    name: "CustomDetail",
    query: {
      customId: customerDetail.value.id
    }
  });
}

dictListAll("ent_type").then(res => {
  ent_type.value = res.data || [];
});

dictListAll("custom_type").then(res => {
  custom_type.value = res.data || [];
});

dictListAll("company_type").then(res => {
  company_type.value = res.data || [];
});

dictListAll("cusotm_stock").then(res => {
  cusotm_stock.value = res.data || [];
});

function getCustomDetail(id: string) {
  if (JSON.stringify(userStore.customInfo) !== "{}")
    return (customerDetail.value = userStore.customInfo);
  showLoadingToast({
    duration: 0, // 持续展示 toast
    forbidClick: true,
    overlay: true,
    message: "加载中..."
  });
  customDetail(id)
    .then(res => {
      customerDetail.value = res.data;
      userStore.customInfo = res.data;
    })
    .finally(() => closeToast());
}

onMounted(() => {
  customerDetail.value = {};
  if (route.query.id) {
    getCustomDetail(route.query.id as string);
  }
});
</script>

<style scoped lang="less">
.custom-box {
  position: relative;
  width: 100%;
  background-color: #f3f4fa;

  .custom-main {
    position: absolute;
    top: 4rem;
    left: 0;
    width: 100%;
    height: calc(100% - 4rem);
    display: flex;
    flex-direction: column;
    padding: 1rem;

    :deep(.van-collapse-item) {
      margin-bottom: 0.5rem;

      .van-cell__title {
        font-size: 1rem;
        font-weight: 700;
      }

      .van-collapse-item__content {
        font-size: 1rem;
        color: #323233;
      }
    }

    .main-header {
      padding: 1rem;
      background-color: #fff;
      border-radius: 0.5rem;

      .custom-info {
        min-height: 2.6rem;
        display: flex;
        align-items: center;

        img {
          width: 2.6rem;
          height: 2.6rem;
          border-radius: 1.3rem;
          object-fit: contain;
        }

        .name {
          width: calc(100% - 3rem);
          margin-left: 0.6rem;
          font-size: 1.2rem;
          font-weight: 700;
        }
      }

      .other-info {
        margin-top: 0.8rem;

        .info {
          text-indent: 2em;
        }
      }
    }

    .main-content {
      flex: 1;
      height: 0;
      margin-top: 1rem;
      overflow: auto;

      .box-card {
        margin-bottom: 1rem;
        padding: 1rem;
        background-color: #fff;
        border-radius: 1rem;
      }

      .brand-content li {
        margin-bottom: 0.6rem;
        font-size: 1rem;
        color: #323233;
      }

      .brand-intro {
        width: 100%;

        .intro-h {
          display: flex;
          justify-content: space-between;
        }

        .html-box {
          width: 100%;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          line-height: 2rem;

          &.expand {
            white-space: normal;
          }
        }

        .btn {
          color: #128bed;
          cursor: pointer;
        }
      }

      .scope-box {
        line-height: 2rem;
      }
    }
  }
}
</style>
